import { forwardRef, useEffect, useState } from 'react'
import { Input } from '@ui/components/editor/common/Input'
import { Item } from '@ui/components/editor/settings/Item'
import { Section } from '@ui/components/editor/settings/Section'
import { Group } from '@ui/components/editor/settings/Group/Group'

type Props = {
  gemini_user_id: number | null
  on_gemini_user_id_change: (id: number | null) => void
  on_stuck_change: (is_stuck: boolean) => void
}

export const PresetsSection = forwardRef<HTMLDivElement, Props>(
  (props, ref) => {
    const [gemini_user_id_str, set_gemini_user_id_str] = useState('')

    useEffect(() => {
      set_gemini_user_id_str(
        props.gemini_user_id === null || props.gemini_user_id === undefined
          ? ''
          : String(props.gemini_user_id)
      )
    }, [props.gemini_user_id])

    const handle_gemini_user_id_blur = () => {
      if (gemini_user_id_str === '') {
        props.on_gemini_user_id_change(null)
        return
      }
      const num_id = parseInt(gemini_user_id_str, 10)
      if (!isNaN(num_id) && num_id >= 0) {
        props.on_gemini_user_id_change(num_id)
      }
    }

    return (
      <Section
        ref={ref}
        title="Presets"
        subtitle="Set up your favorite chatbot to run with a model of choice, prompt prefix or suffix, and more."
        on_stuck_change={props.on_stuck_change}
      >
        <Group>
          <Item
            title="Gemini User ID"
            description="Run Gemini chatbot as non-default user. Check URL for the numeric ID."
            slot={
              <Input
                type="number"
                value={gemini_user_id_str}
                on_change={set_gemini_user_id_str}
                on_blur={handle_gemini_user_id_blur}
                max_width={60}
              />
            }
          />
        </Group>
      </Section>
    )
  }
)
PresetsSection.displayName = 'PresetsSection'
